<template>
  <el-dialog class="member-dialog" v-model="visible" width="80%" max-width="1200px">
    <div v-loading="detailLoading">
      <div class="dialog-header">
        <h3>{{ member.name }} 会员详情</h3>
      </div>

      <div class="sections">
        <!-- 传递包含充值金额、消费金额和会员等级的数据 -->
        <BasicInfo
          :member="member"
          :data="[
            {
              id: member.id,
              name: member.name,
              discount: member.discount,
              count: member.count,
              rechargeAmount: member.rechargeAmount,
              consumptionAmount: member.consumptionAmount,
              lv: member.lv
            }
          ]"
          @onDelete="handleDelete"
          @onEdit="handleEdit"
        />
        <RechargeHistory :member="member" />
        <OrderList :member="member" />
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, PropType, watch, reactive } from 'vue';
import { ElDialog } from 'element-plus';
import BasicInfo from './vip/BasicInfo.vue';
import RechargeHistory from './vip/RechargeHistory.vue';
import OrderList from './vip/OrderList.vue';


const date = reactive({
  isFirst: true,
  data: [],
  Products: [],
  loading: false,
  key: "",
  details_key: "",
  details_key_id: "",
  pages: {
    page: 1,
    limit: 10,
    total: 0,
  },
  time1: "",
  time2: ""
});

interface Member {
  id: string;
  name: string;
  registrationDate: string;
  contact: string;
  rechargeAmount: number;
  consumptionAmount: number;
  giftAmount: string;
  orders: any[];
  rechargeHistory: any[];
  discount: number;
  count: number;
  lv: string;
}

interface VipLevel {
  id: string;
  name: string;
  discount: number;
  count: number;
  rechargeAmount: number;
  consumptionAmount: number;
  lv: string;
}

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  member: {
    type: Object as PropType<Member>,
    required: true
  }
});

const emit = defineEmits(['update:modelValue', 'update']);
const detailLoading = ref(false);
const visible = ref(props.modelValue);

watch(
  () => props.modelValue,
  (newValue) => {
    detailLoading.value = true;
    visible.value = newValue;
  }
);

watch(
  () => visible.value,
  (newValue) => {
    emit('update:modelValue', newValue);
  }
);

watch(
  () => props.member,
  () => {
    setTimeout(() => {
      detailLoading.value = false; // 假设这里模拟数据加载完成
    }, 500); // 模拟1秒的数据加载时间
  },
  { immediate: true }
);

const refreshData = () => {
  emit('update');
};

// 处理删除事件
const handleDelete = () => {
  // 实现删除逻辑
};

// 处理编辑事件
const handleEdit = () => {
  // 实现编辑逻辑
};
</script>

<style scoped>
.member-dialog {
  padding: 24px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.dialog-header {
  padding: 24px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
}

.sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
}

.sections > div {
  padding: 24px;
  border-radius: 8px;
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
</style>



